<template>
    <div class="web-login">
    <video class="bg_video" :src="videoBg" autoplay="autoplay" muted="muted" loop="loop" ></video>
    <div class="login_bg">
    <img class="pic-bg" :src="bg_img" />
    <el-form class="login_form" style="">
        <el-form-item label="">
            <el-input type="text" v-model="state.form.name" placeholder="用户名"/>
        </el-form-item>
        <el-form-item label="">
            <el-input type="password" v-model="state.form.userPwd" placeholder="密码"/>
        </el-form-item>
       <div class="footer-div">
        <el-button class="login-btn" @click="login" type="primary">登录</el-button> 
       </div>
    </el-form>
</div>
</div>

</template>
<script setup lang="ts">
import { reactive } from 'vue';
import { loginUser } from '@/api/login'
import { ElMessage, ElMessageBox } from 'element-plus'
import bg_img from '@/assets/images/bg.jpg'
import videoBg from '@/assets/images/bg.mp4'
const router = useRouter()
let state=reactive({
    form:{
        name:'123',
        userPwd:'12345'
    }
})

const login=async()=>{
    loginUser(state.form).then(response=>{
        if(response.code===1){
            const curUser=response.data||{}
            ElMessage.success("登陆成功")
            sessionStorage.setItem("userName",curUser.name)
            sessionStorage.setItem("userId",curUser.id)
            router.push({ path: '/home' }).then(() => {
                sessionStorage.setItem("loginUser",JSON.stringify(curUser))
            })
        }
    })
}
</script>
<style lang="scss">
body {
    margin: 0;
    display: flex;
    place-items: center;
    min-width: 320px;
    min-height: 100vh;
    // background: #031935;
}
.web-login{
    background: #021934;
    // overflow: hidden;
    display: flex;
    width: 100%;
    justify-content: flex-end;
}
img.pic-bg {
    width: 400px;
    height: auto;
    z-index: 999;
    position: relative;
    opacity: 0.5;
}
.login_form{
    width: 90%; 
    margin: auto;
    margin-top: -53%;
    position:relative;
    z-index:999;
}
video.bg_video {
    background: #021934;
    position: absolute;
    height: 100%;
    top: 0px;
    left: 0%;
    width: 100%;
}
.login_bg {
    margin-right: 100px;
}
.footer-div .el-button--primary {width: 100%;}
</style>
